<template>
    <el-time-picker v-model="model"
        :picker-options="pickerOptions"
        :placeholder="placeholder"
        :default-value="defaultValue"
        :disabled="disabled"
        :size="size"
        :editable="!uneditable"
        @change="change"
        :clearable="!unclearable"></el-time-picker>
</template>
<script>
    export default {
        name   : 'ui-time-picker-component',
        props  : {
            value          : {},
            placeholder    : {},
            disabled       : {},
            minDate        : {},
            maxDate        : {},
            format         : {},
            size:String,
            timeString:'',
            uneditable: {
                type: Boolean,
                default: false
            },
            unclearable: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                pickerOptions: {
                    selectableRange: ''
                },
                model        : this.value,
                defaultValue : ''
            }
        },
        mounted () {
            this.setDefaultValue(new Date());
            this.setLimit();
        },
        updated () {

        },
        beforeDestroy () {

        },
        watch  : {
            model: function (val, old) {
                let valDate = val ? (typeof val !== 'object' ? new Date(val) : val) : '';
                let newVal = valDate ? (this.timeString !== undefined ? this.$bui.formatDate(valDate, this.format) : new Date(valDate).getTime()) : '';
                this.$emit('input', newVal);
            },
            minDate (val, oldVal) {
                this.setLimit();
            },
            maxDate (val, oldVal) {
                this.setLimit();
            },
            value: function (val) {
                val = this.checkNumber(val);
                let time = val.indexOf(' ') > -1 ? val.split(' ')[1] : val
                let today = this.$bui.formatDate(new Date(), 'yyyy-MM-dd')
                let newVal = today + ' ' + time
                this.model = val ? (typeof val !== 'object' ? new Date(newVal) : val) : ''
            }
        },
        methods: {
            change(val) {
                this.$emit('change', val)
            },
            setLimit () {
                // let _this = this;
                if (this.minDate && this.maxDate) {
                    this.pickerOptions.selectableRange = this.checkNumber(this.minDate) + ' - ' + this.checkNumber(this.maxDate);
                } else if (this.minDate || this.maxDate) {
                    if (this.minDate) {
                        this.pickerOptions.selectableRange = this.checkNumber(this.minDate) + ' - 23:59:59';
                    }
                    if (this.maxDate) {
                        this.pickerOptions.selectableRange = '00:00:00 - ' + this.checkNumber(this.maxDate);
                    }
                } else {
                    this.pickerOptions.selectableRange = '';
                }
            },
            setDefaultValue (val) {
                let today = this.$bui.formatDate(new Date(), 'yyyy-MM-dd');
                if (val.getTime() < new Date(today + ' ' + this.minDate).getTime()) {
                    this.defaultValue = new Date(today + ' ' + this.minDate);
                } else if (val.getTime() > new Date(today + ' ' + this.maxDate).getTime()) {
                    this.defaultValue = new Date(today + ' ' + this.maxDate);
                } else {
                    this.defaultValue = '';
                }
            },
            checkNumber(val) {
                if(typeof val === 'string' && val.match(/^\d{13}$/)) {
                    return this.$bui.formatDate(new Date(Number(val)), 'HH:mm:ss')
                } else if(typeof val === 'number' && val.toString().length === 13) {
                    return this.$bui.formatDate(new Date(val), 'HH:mm:ss')
                }
                return val
            }
        }
    }
</script>
